<template>
  <div class="goods_wrap">
    <el-steps :active="active" align-center>
      <el-step title="基本信息"></el-step>
      <el-step title="商品相册"></el-step>
      <el-step title="商品详情"></el-step>
      <el-step title="上架信息"></el-step>
    </el-steps>

    <el-form class="goods_content">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="商品缩略图" prop="name" style="text-align: left">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            list-type="picture"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>
        <!-- <el-form-item label="商品相册" prop="name" style="text-align: left">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item> -->
        <el-form-item label="产品图片:" style="text-align: left">
          <el-upload
            action="上传接口"
            :limit="1"
            :on-preview="handlePictureCardPreview"
            :before-upload="beforeAvatarUpload"
            :on-progress="onProgress"
            :on-success="imgSuccess"
            :on-error="imgError"
            list-type="picture-card"
            :on-remove="handleRemove"
            :class="{ disabled: uploadDisabled }"
            :file-list="fileList"
          >
            <i class="el-icon-plus"></i>
            <div slot="tip" class="el-upload__tip">只能上传不超过4MB的图片</div>
          </el-upload>
        </el-form-item>
        <el-dialog
          :modal-append-to-body="false"
          :visible.sync="imgVisible"
          width="30%"
        >
          <img width="100%" :src="dialogImageUrl" alt="图片未找到" />
        </el-dialog>
      </el-form>
    </el-form>
    <el-button type="success" style="margin-top: 12px" @click="last"
      >上一步</el-button
    >
    <el-button type="success" style="margin-top: 12px" @click="next"
      >下一步</el-button
    >
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      // 是否禁用上传
      uploadDisabled: false,
      // 是否显示预览图片
      imgVisible: false,
      // 预览图片url
      dialogImageUrl: "",
      // 上传的文件列表, 例如: [{name: 'xxx.jpg', url: 'https://xxx.com/xxx.jpg'}]
      fileList: [],
      submitData: {
        // 产品图片
        productImg: "",
      },
      active: 1,
      ruleForm: {
        name: "",
        region: "",
        resource: 0,
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
      },
    };
  },
  components: {},
  methods: {
    next() {
      if (this.active++ > 2) this.active = 0;
      this.$router.push("/proDetails");
    },
    last() {
      this.$router.push("/information");
    },
    handlePreview(file) {
      console.log(file);
    },
    backCardImageMain() {},
    beforeAvatarUpload(file) {
      let isLt4M = file.size / 1024 / 1024 < 4;
      if (!isLt4M) {
        this.$message.error("上传头像图片大小不能超过 4MB!");
      }
      return isLt4M;
    },
    // 上传中
    onProgress(event, file, fileList) {
      this.uploadDisabled = true;
    },
    // 图片上传成功
    imgSuccess(response, file, fileList) {
      this.uploadDisabled = true;
      if (response.status == 0) {
        this.submitData.productImg = response.data;
      } else if (response.status == -1) {
        this.submitData.productImg = "";
        this.fileList = [];
        this.uploadDisabled = false;
        this.$message.error(response.errorMsg);
      } else {
        this.submitData.productImg = "";
        this.fileList = [];
        this.uploadDisabled = false;
        this.$message.error(response.errorMsg);
      }
    },
    // 图片上传失败
    imgError(err, file, fileList) {
      console.log(fileList);
      this.$message.error("上传失败");
      this.uploadDisabled = false;
    },
    // 预览图片
    handlePictureCardPreview(e) {
      this.imgVisible = true;
      this.dialogImageUrl = e.target.currentSrc;
      this.uploadDisabled = true;
    },
    // 删除图片
    handleRemove(file, fileList) {
      this.submitData.productImg = "";
      this.uploadDisabled = false;
    },
  },
};
</script>

<style scoped>
.goods_wrap {
  width: 100%;
  height: 100%;
  padding: 50px 10px;
  background-color: #fff;
  box-sizing: border-box;
}
.goods_content {
  width: 1200px;
  margin: 0 auto;
  padding: 50px 0px;
  box-sizing: border-box;
}
.disabled >>> .el-upload--picture-card{
  display: none;
}
</style>